<template>
  <view>
    <cu-custom bgColor="bg-white">
      <block slot="left" class="margin-left-lg" @tap="$tools.goTo('/pages/selectCity/selectCity')">
        <text class="text-black">{{ location.city }}</text>
        <view class="inline-block" v-if="location.city">
          <text class="cuIcon-unfold text-gray margin-left-xxs"></text>
        </view>
      </block>

      <block slot="content" class="text-000 text-black">
        <text>有你电影票</text>
      </block>
    </cu-custom>

    <!--幻灯片开始-->
    <view class="bg-white flex padding-top-xs" style="height: 270rpx;">
      <swiper :list="banner" class="flex banner"></swiper>
    </view>
    <!--幻灯片结束-->

    <!--头部-->
    <view>

    </view>

    <!--影片列表内容-->
    <u-sticky :offset-top="offsetTop" :enable="enable" @fixed="fixed" @unfixed="unfixed">
      <view class="solid-bottom text-center checked flex justify-between bg-white padding-left padding-top-xs">
        <view class="flex justify-between">
          <view class="text-lg margin-right-xxl flex justify-center align-center flex-direction" :class="type==='hot' ? 'curr':''">
            <text class="text-center flex" @tap="fetchData('hot',true)">正在热映</text>
            <view v-if="type=='hot'" class="margin-tb-xs margin-bottom-sm bg-red" style="width: 60rpx;height: 6rpx;"></view>
            <view v-else class="margin-tb-xs margin-bottom-sm bg-white" style="width: 60rpx;height: 6rpx;"></view>
          </view>
          <view class="text-gray flex justify-center align-center text-lg flex-direction" :class="type==='soon' ? 'curr':''">
            <text class="text-center flex" @tap="fetchData('soon',true)">即将上映</text>
            <view v-if="type=='soon'" class="margin-tb-xs margin-bottom-sm bg-red" style="width: 60rpx;height: 6rpx;"></view>
            <view v-else class="margin-top-xs margin-bottom-sm bg-white" style="width: 60rpx;height: 6rpx;"></view>
          </view>
        </view>
		
        <view class="margin-lr-lg padding-top-xs" @tap="$tools.goTo('/pages/movie/search')">
          <text class="cuIcon-search text-gray margin-top-xxs margin-right"></text>
        </view>

      </view>
    </u-sticky>
	
    <!--影片列表-->
      <view class="flex justify-between bg-white align-center padding solid-bottom" v-for="(item,index) in data.list"
            :key="index">
        <!--左边-->
        <view class="flex">
          <!--左边left图片-->

<!--          跳转影片详情页-->
          <navigator hover-class="none" :url="'/pages/movie/movie?show_id='+item.id">

          <view class="margin-right-sm" >
            <img :src="$tools.mThumb(data.imgurl+item.poster,250)" style="width:180rpx;height:220rpx;" class="radius"/>
          </view>
            </navigator>


          <!--左边left标题-->
          <view class="text-gray" @tap="buyTicket(item)">
            <view class="text-black text-bold text-lg margin-right margin-top-xs"
                  style="width:330rpx;overflow:hidden;text-overflow: ellipsis;word-break:keep-all;white-space:nowrap;">
              {{ item.showName }}
            </view>
            <view class="margin-top-xs">
              <block v-if="item.remark">
                <text class="margin-right-xs">评分</text>
                <text class="text-yellow">{{ item.remark }}分</text>
              </block>
              <block v-else>
                <text class="margin-right-xs">暂无评分</text>
              </block>

            </view>
            <view class="margin-top-xs">
              <text class="inline-block"
                    style="width:360rpx;overflow:hidden;text-overflow: ellipsis;word-break:keep-all;white-space:nowrap;">
                主演:{{ item.leadingRole }}
              </text>
            </view>
            <view class="margin-top-xs">
              {{ item.openTime }}上映
            </view>
          </view>
        </view>
        <!--右边-->
        <view v-if="item.is_buy">
          <button class="cu-btn bg-red radius-lg" @tap="buyTicket(item)">购票</button>
        </view>
        <view v-else>
          <button class="cu-btn bg-blue radius-lg" @tap="buyTicket(item)">预购</button>
        </view>

<!--        首页红包-->
        <view @tap="share" class="bg-red text-white fixed text-sm flex justify-between padding-xs share-btn" :class="[shareStatus?'share-btn':'share-btn-click']">
          <view class="iconfont icon-earn text-yellow align-center flex" style="font-size:60rpx"></view>
          <view class="padding-right-xs">
            <text class="flex flex-direction">分享赚红包</text>
            <text class="flex flex-direction">多邀多得哦</text>
          </view>
        </view>
      </view>

    <!--加载更多[more|loading|noMore]-->
    <load-more color="#aaa" :status="loadingMoreOptions.loading" iconType="circle" :contentText="context"
               iconSize="12"/>

    <eqd-copy-right/>
  </view>
</template>
<script>
import loadMore from "@/components/LoadMore/uni-load-more"
import swiper from '../../components/swiper/index'
import uSticky from '../../components/u-sticky/u-sticky.vue'

export default {
  components: {
    swiper,
    loadMore,
    uSticky
  },
  data() {
    return {
      banner: [],
      type: 'hot',
      data: '',
      options: '',
      current_page: 1,
      loadingMoreOptions: {loading: 'more'},
      context: {contentrefresh: '', contentnomore: '已经到底啦~'},
      offsetTop: this.CustomBar,
      enable: true,
	  shareStatus: false
    }
  },
  computed: {
    location() {
      return this.$tools.location();
    }
  },
  created(options) {
    this.fetchBanner()
    this.fetchData()
  },
  methods: {
    async fetchBanner() {
      //幻灯片
      let res = await this.$api.index();
      this.banner = res.data.banner
    },
    async fetchData(type = 'hot', tabSwitch = false) {
      console.log('首页fetchData' + ' type:' + type)

      if (!this.location) {
        console.log('没有获取到位置信息无法获取列表')
        return
      }
      //切换tab 分页初始化
      if (tabSwitch === true) {
        this.data = ''
        this.current_page = 1
      }
      let res;
      if (type === 'hot') {
        res = await this.$api.hotmovie({city_name: this.location.city, page: this.current_page});
      } else if (type === 'soon') {
        res = await this.$api.soonmovie({city_name: this.location.city, page: this.current_page});
      }
      this.type = type;
      if (res) {
        //有数据
        if (this.data.list && this.data.list.length > 0) {
          res.data.list = this.data.list.concat(res.data.list)
        } else {
          console.log('当前没数据')
        }
        this.data = res.data;

        //分页设置
        let {current_page, last_page, total} = res.data.meta //分页信息
        if (current_page >= last_page) {
          this.loadingMoreOptions.loading = 'noMore' //没有了
        }
        if (total === 0) this.context.contentnomore = ''
      }


      //console.log(res.data)
      //this.movie = res.data;
    },
    buyTicket(item) {
      this.$tools.goTo('/pages/cinema/movie_cinema', {show_id: item.yid, name: item.showName})
    },
	share(){
		if(this.shareStatus === false){
			this.shareStatus = true
		} else {
			this.shareStatus = false
		}
	}
  }
}
</script>

<style>
.fix {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  scroll: hidden;
}

.checked .solid:after {
  border: 1 rpx solid rgba(255, 0, 0, 0.5);
}

.curr {
  color: red;
  font-weight:700
}
.share-btn{
	border-radius:50rpx 0 0 50rpx;
	bottom:230rpx;
	right:0;
	width:216rpx;
	background:-webkit-linear-gradient(left,#FC4A5B,#FF8B60);
}
.share-btn-click{
	right:-150rpx;
}
</style>
